<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The ONE智能钢琴</title>
    <link rel="stylesheet" href="{{url_for('static',filename='reset.css')}}">
    <!-- <link rel="stylesheet" href="../../static/reset.css"> -->
    <style>
        body {
            width: 100%;
            height: 100%;
            background: url('/static/share_img/d_bg@2x.png') center no-repeat;
            /* background: url('../../static/share_img/d_bg@2x.png') center no-repeat; */
            background-size:cover;
        }
        .main {
            position: relative;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            padding-top: 1.85rem;
        }
        .main .main-img{
            position: absolute;
            width: 3.16rem;
            height:1.5rem;
            top:0.06rem;
            right:0.42rem;
        }
        .main .main-p{
            font-family: PingFang SC;
            color:#fff;
            font-size: 0.34rem;
            font-weight: bold;
            text-align: left;
            /* width: 3.6rem; */
            padding-left: 1.9rem;
        }
        .main .main-p span{
            color:red;
        }
        .main .main-up{
            color: #CCCCCC;
            font-size:0.26rem;
            position: absolute;
            bottom:2.2rem;
            left:0;
            right:0;
        }
        .main .main-bottom{
            width: 2.3rem;
            height:0.8rem;
            border:1px solid #CCCCCC;
            border-radius:0.08rem;
            line-height: 0.8rem;
            text-align: center;
            color:#CCCCCC;
            font-size: 0.34rem;
            position: absolute;
            bottom:0.92rem;
            left:50%;
            transform: translate3d(-50%, 0, 0);
        }
    </style>
</head>

<script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
    window.onresize = function (e) {
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 7.5 + 'px';
    }
</script>
<body>
    <div class="main" align="center">

    </div>
    <script type="text/template" id="theone-client-android">
        <div class="main-img">
            <img src="{{url_for('static',filename='share_img/girl@2x.png')}}" alt="">
            <!-- <img src="../../static/share_img/girl@2x.png" alt=""> -->
        </div>
        <p class="main-p">请点击右上角 “...”</p>
        <p class="main-p">选择在本地<span> “浏览器” </span>中打开,</p>
        <p class="main-p">直接跳转到APP</p>
        <p class="main-up">若未安装The ONE智能钢琴，可点击下载按钮</p>
        <a class="main-bottom" href="http://www.1tai.com/download-smartpiano.html">
            下载更新
        </a>
    </script>
    <script type="text/template" id="theone-client-ios">
        <div class="main-img">
            <img src="{{url_for('static',filename='share_img/girl@2x.png')}}" alt="">
            <!-- <img src="../../static/share_img/girl@2x.png" alt=""> -->
        </div>
        <p class="main-p">请点击右上角 “...”</p>
        <p class="main-p">选择<span id="p-device"> “在Safari中打开” </span>,</p>
        <p class="main-p">直接跳转到APP</p>
        <p class="main-up">若未安装The ONE智能钢琴，可点击下载按钮</p>
        <a class="main-bottom" href="http://www.1tai.com/download-smartpiano.html">
            下载更新
        </a>
    </script>
    <script type="text/template" id="theone-download">
        <div class="m-uvl">
            <p class="sub f-tc">( <a class="f-tdu s-fc4" href="javascript:openApp();">点此打开</a> )</p>
            <div class="wrap f-vhc">
                <div class="logo"></div>
                <a href="http://www.1tai.com/download-smartpiano.html" class="btn f-tc">立即下载</a>
            </div>
        </div>
    </script>
    <script type="text/javascript">
        (function() {
            var main = document.querySelector('.main')
            var tDownload = document.querySelector('#theone-download').innerHTML
            var ua = window.navigator.userAgent.toLocaleLowerCase()
            var isAndroid = /android/.test(ua)
            var isIOS = /ipad|iphone|ipod/.test(ua)
            var tClient = isAndroid ? document.querySelector('#theone-client-android').innerHTML : document.querySelector('#theone-client-ios').innerHTML
            // 匹配qq，不匹配qqbrowser
            var showTip = /micromessenger|weibo|qq(?!browser)/.test(ua)

            function createScheme() {
                var baseScheme = 'smartpiano://'
                var host = window.location.host + window.location.pathname
                var query = window.location.search
                return baseScheme + host + query
            }
            function openApp() {
                var schemeLink = createScheme()
                window.location.href = schemeLink
            }
            window.openApp = openApp

            setTimeout(function() {
                main.innerHTML = showTip ? tClient : tDownload
            }, 0)

        })()

    </script>
</body>

</html>